<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>05 进度条</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #bar {
            width: 200px;
            height: 10px;
            background: pink;
        }
    </style>
</head>

<body>
    <div id="bar"></div>
    <p id="scal">0%</p>
</body>
<script src="../common.js"></script>
<script>
    /*
        需求：制作进度条
            * 开启定时器(setInterval) 不断的改变bar的宽度就行
            * 注意临界值的设置：不能超过可视区的总宽
        
        知识点：
            * 可视区的宽度获取：window.innerWidth;
            * 可视区的高度获取：window.innerHeight;
    */

    (function () {

        //找到节点
        var bar = getid('bar');
        var scalele = getid('scal');
        var speed = 0;
        var iW = window.innerWidth;
        var timer = null;//初始化一个空对象
        var scal = 0;//比例
        console.log(iW);

        //开启定时器
        function setWidth() {
            speed += 10;//步长
            if (speed >= iW) {
                //停止
                clearInterval(timer);//到达临界点，只要不需要继续运动，就应该及时关掉定时器
                bar.style.width = '100%';
                scalele.innerHTML = '100%';
            } else {
                scal = (speed / iW) * 100;
                console.log(scal);
                bar.style.width = speed + 'px';
                scalele.innerHTML = scal.toFixed(2) + '%';
            }

        }

        timer = setInterval(setWidth, 30);//30毫秒.帧速  1s播放的画面


    })();
</script>

</html>